瀑布流布局详解

   瀑布流概念：又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是Pinterest，后逐渐在国内流行。

  瀑布流原理：页面容器内的多个高度不固定的div之间按照一定的间隔参差不齐的无序浮动，鼠标滚动时不断在容器内的尾部加载数据，且自动加载到空缺位置，不断循环。

     优点：

                1.有效降低了界面复杂度，节省了空间：不再需要臃肿复杂的页面导航链接或者按钮了； 

                2.在触屏设备上交互方式有更好的用户体验，通过向上滑动进行页面滚动和数据加载，对操作的精准程度要求远远低于点击按钮或者链接；

                3.更高的参与度，使用户能更好的专注于浏览而不是操作；

       缺点：

                1.无限滚动只适用与特定类型产品中的某一类型，如某类微博信息，购物网站的某类商品，而不适用与一般的门户网站，使用需斟酌；

                2.需要打造额外的js库来保证页面数据的加载和排列，而这在一定意义上增加了在网页的性能和设备兼容等方面的问题。

  js核心思路：

   1.编写方法：获取容器内所有外层元素，存入数组；

                2.编写方法：计算容器内一行可以承载多少个元素，方法：容器宽度/元素宽度，四舍五入向下取整；

                3.编写方法：把每一行中所有元素的高度值存入数组；

                4.编写方法：在高度值数组中找到最小高度值；

                5.编写方法：把第二行第一个元素定位到上一行所有元素中高度最低的元素下面，即设置该元素的top，left，position属性；

                6.编写方法：重置当前高度值数组中的最小值；

                7.编写方法：从第二行第一个元素开始，遍历每个元素，用上述方法重新定位每个元素的位置，把该事件绑定到页面；

                8.编写方法：监听鼠标事件，当前容器内最下面一个元素的offsetTop<浏览器可视高度+已滚动高度时，加载下一页数据；

                9.加载完之后，用上述方法重新定位新加载元素的位置；

JS实现：

window.onload = function(){waterfall('main','box');//模拟json数据var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};//监听scroll事件window.onscroll = function(){var isPosting = false;if(checkScollSlide('main','box') && !isPosting){var oParent = document.getElementById('main');for(var i in dataJson.data){isPosting = true;var oBox = document.createElement('div');oBox.className = 'box';oBox.innerHTML = '
     
      
     
';oParent.appendChild(oBox);}isPosting = false;waterfall('main','box');}}}/** parent 父元素id clsName 块元素类*/function waterfall(parent,clsName){//获取父元素var oParent = document.getElementById(parent),//获取所有boxaBoxArr = oParent.getElementsByClassName(clsName),//单个box宽度iBoxW = aBoxArr[0].offsetWidth,// 列数cols = Math.floor(document.documentElement.clientWidth / iBoxW);oParent.style.cssText = 'width:'+iBoxW*cols+'px;margin:0 auto;';//储存所有的高度var hArr = [];for(var i = 0; i < aBoxArr.length; i++){if(i < cols){hArr[i] = aBoxArr[i].offsetHeight;}else{//获取hArr最小值var minH = Math.min.apply(null,hArr),// hArr最小值索引indexminHIndex = getMinHIndex(hArr,minH);aBoxArr[i].style.cssText = 'position:absolute;top:'+minH+'px;left:'+aBoxArr[minHIndex].offsetLeft+'px;';//添加元素之后更新hArrhArr[minHIndex] += aBoxArr[i].offsetHeight;}}}//获取最小值索引function getMinHIndex(arr,val){for(var i in arr){if(arr[i] == val){return i;}}}//检查是否满足加载数据条件,parent 父元素id clsName 块元素类function checkScollSlide(parent,clsName){var oParent = document.getElementById(parent),aBoxArr = oParent.getElementsByClassName(clsName),// 最后一个box元素的offsetTop+高度的一半lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2,//兼容js标准模式和混杂模式scrollTop = document.documentElement.scrollTop || document.body.scrollTop,height = document.documentElement.clientHeight || document.body.clientHeight;return lastBoxH < scrollTop + height ? true : false;}